<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>评定审核链</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <div class="box" v-for="(item, index) in dataList" :key="index">
      <img src="../../../../assets/审核链/用户.png" alt="">
      <span>{{item.assesschain_name}}</span>
      <button class="updateBtn" @click="update(item, index)">编辑</button>
    </div>
    <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 80%;
    display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>
      加载中...
    </van-loading>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="dataList.length <= 0 && isLoading == false"
      class="custom-image"
      :image="require('../../../../assets/空两本书.png')"
      description="暂无评定审核链"
    />
    <div class="btnBottom">
      <button class="keepBtn" @click="run"><img src="../../../../assets/白添加.png" alt="">新建
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JudgeList',
  data () {
    return {
      team_id: this.$route.query.team_id,
      userid: this.$route.query.userid,
      isEdit: this.$route.query.isEdit,
      dataList: [],
      isLoading: true
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 编辑
    update (item, index) {
      this.$router.push({path: '/JudgeAdd',
        query: {
          team_id: this.team_id,
          userid: this.userid,
          isEdit: 1,
          id: item.id
        }})
    },
    getData () {
      this.isLoading = true
      this.$http.findTeamAssesschain({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.dataList = res.data.data
            this.isLoading = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    run () {
      this.$router.push({path: '/JudgeAdd',
        query: {
          team_id: this.team_id,
          userid: this.userid
        }})
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.box{
  width: 100%;
  height: 50px;
  margin-top: 5px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box img{
  width: 15px;
  height: 15px;
}
.updateBtn{
  width: 60px;
  height: 29px;
  background: #FFFFFF;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  font-size: 15px;
  font-weight: bold;
  color: #1DA4F2;
}
.box span{
  width: 70%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btnBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  position: fixed;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnBottom .keepBtn{
  width: 90%;
  height: 44px;
  border-radius: 20px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
}
.keepBtn img{
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

</style>
